<template>
  <el-row>
    <!--  -->
    <el-col :span="24">
      <el-table :data="tableData" style="width: 100%" border :cell-style="{ textAlign: 'center' }">
        <el-table-column header-align="center" prop="id" label="编号" width="100">
        </el-table-column>
        <el-table-column header-align="center" prop="buildingName" label="房源名称">
        </el-table-column>
        <el-table-column header-align="center" prop="name" label="租客姓名" width="150">
        </el-table-column>
        <el-table-column header-align="center" prop="phone" label="租客电话" width="150">
        </el-table-column>

        <el-table-column header-align="center" prop="signDate" label="合同起止日期">
        </el-table-column>
        <el-table-column header-align="center" prop="rent" label="租金" width="200">
        </el-table-column>
        <!-- <el-table-column header-align="center" prop="state" label="状态" width="100">
        </el-table-column> -->
        <el-table-column header-align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="details(scope.row.id)">查看详情</el-button>
            
             <el-button type="text" @click="handleDelete(scope.row.id)" style="color: #FB9678;">删除</el-button>
            
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagenation :total="total" :page-size="pageSize" @changepage="changepage"></pagenation>
    </el-col>


    <!--模态框  -->
    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">
      <!-- 取消了这个部分 -->
      <!-- <el-steps :active="activesteps" v-for="(value, index) in gridData" :key="index">
        <el-step title="提交租房申请" description=""><template slot="description">
            {{ value.name }} <br />{{ value.requesdate }}
          </template></el-step>
        <el-step title="房东确认" description=""><template slot="description">
            {{ value.housename }} <br />{{ value.housetel }}
          </template></el-step>
        <el-step title="在线签约" description=""></el-step>
        <el-step title="付款&完成" description=""></el-step>
      </el-steps> -->
      <div v-bind=" gridData"  >
        <el-descriptions title="房源信息" class="margin" :column="2" >
          <el-descriptions-item label="小区名称">{{ gridData.buildingName }}</el-descriptions-item>
          <el-descriptions-item label="小区地址">{{ gridData.buildingAddress }}</el-descriptions-item>
          <el-descriptions-item label="房屋配置">{{ gridData.facilityNames }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="房东信息" class="margin" :column="2">
          <el-descriptions-item label="姓名">{{ gridData.landlordName }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ gridData.landlordPhon }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ gridData.landlordIdentityCard }}</el-descriptions-item>

        </el-descriptions>
        <el-descriptions title="租客信息" class="margin" :column="2">
          <el-descriptions-item label="姓名">{{ gridData.lodgerName }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ gridData.lodgerPhone }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ gridData.lodgerIdentityCard }}</el-descriptions-item>

        </el-descriptions>
        <el-descriptions title="合同信息" class="margin" :column="1">
          <el-descriptions-item label="合同起止日期">{{ gridData.signDate }}至{{ gridData.endDate }}</el-descriptions-item>
          <el-descriptions-item label="租金">{{ gridData.rent }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogbtn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页组件 -->
    <!-- <el-row>
      <el-col :span="24">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination> 
        </el-col>
        </el-row> -->
  </el-row>
</template>

<script>
import pagenation from '@/components/ht/pagenation.vue'
export default {

  created() {

    this.http(1)

  },
  data() {
    return {
      total: 0,
      pageSize: 10,
      dialogVisible: false,
      activesteps: 1,
      gridData: [],
      date: 0,
      nowpage:1,
      tableData: [],
    };

  },
  components: { pagenation },
  methods: {
    //数据渲染
    http(page) {
      // console.log(page);
      this.$axios({
        method: 'get',
        url: '/houseRentRequest/list',
        params: {
          page: page,
          limit: 10
        }
      })
        .then(res => {
          // console.log(res);
          if (res.code == 0) {
            this.total = res.count
            // console.log(this.total);
            this.tableData = res.data;
            // this.tableD = this.tableData
            this.tableData.forEach((el, index) => {
              //时间转换
              if (el.signDate) {
                this.date = new Date(el.signDate);
                var year = this.date.getFullYear();
                var mon = this.date.getMonth() + 1;
                var day = this.date.getDate()
                var hour = this.date.getHours();
                var min = this.date.getMinutes();
                var sec = this.date.getSeconds();
                mon = mon < 10 ? "0" + mon : mon;
                day = day < 10 ? "0" + day : day;
                hour = hour < 10 ? "0" + hour : hour;
                min = min < 10 ? "0" + min : min;
                sec = sec < 10 ? "0" + sec : sec;
                el.signDate = year + '-' + day + '-' + hour + ':' + min + ':' + sec
              }
            })
          }

        })
    },
    //分页
    changepage(num){
      this. nowpage = num;
      this.http(num)
    },

    
    //查看详情
    details(id) {
      // console.log(id);
      this.dialogVisible = true;
      this.$axios({
        method: 'get',
        url: '/houseRentRequest/findDetailById',
        params: {
          id: id
        }
      })
        .then(res => {
          if (res.code === 0) {
            this.gridData = res.data;
          
          if (this.gridData.signDate) {
                this.date = new Date(this.gridData.signDate);
                var year = this.date.getFullYear();
                var mon = this.date.getMonth() + 1;
                var day = this.date.getDate()
                var hour = this.date.getHours();
                var min = this.date.getMinutes();
                var sec = this.date.getSeconds();
                mon = mon < 10 ? "0" + mon : mon;
                day = day < 10 ? "0" + day : day;
                hour = hour < 10 ? "0" + hour : hour;
                min = min < 10 ? "0" + min : min;
                sec = sec < 10 ? "0" + sec : sec;
                this.gridData.signDate = year + '-' + day + '-' + hour + ':' + min + ':' + sec
              };
              
          
             if (this.gridData.endDate) {
                this.date = new Date(this.gridData.endDate);
                var year = this.date.getFullYear();
                var mon = this.date.getMonth() + 1;
                var day = this.date.getDate()
                var hour = this.date.getHours();
                var min = this.date.getMinutes();
                var sec = this.date.getSeconds();
                mon = mon < 10 ? "0" + mon : mon;
                day = day < 10 ? "0" + day : day;
                hour = hour < 10 ? "0" + hour : hour;
                min = min < 10 ? "0" + min : min;
                sec = sec < 10 ? "0" + sec : sec;
                this.gridData.endDate = year + '-' + day + '-' + hour + ':' + min + ':' + sec
              }
              
          }
          console.log(this.gridData);
        })
     
      //
    },


    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.gridData = [];
        })
        .catch((_) => { });
    },
    dialogbtn() {
      this.dialogVisible = false;
      this.gridData = [];
    },
    //删除
    handleDelete(id) {
      // console.log(id);

      this.$confirm("你确认要删除吗？")


        .then((res) => {
          // 点击确定时执行
          //删除的请求接口
          this.$axios({
            method: 'get',
            url: '/houseRentRequest/delete',
            params: {
              id: id
            }
          }).then(res => {
            console.log(res);
            if (res.code === 0) {
              // this.http(1)
             this.$message.success('删除成功')
             this.changepage(this.nowpage)
            }else{
              this.$message.error('删除失败')
            }
          })
        })
        .catch((err) => {
          // 点击取消时执行
          this.$message.error('删除失败'),
            
          console.log(err); // "cancle"
        });
    },
  },
};
</script>

<style scoped>
a {
  margin-left: 20%;
}

.margin {
  margin-top: 20px;
}
</style>
